<template>
  <div class="registered-start positRel">
    <div class="main">
      <MenuLocation :title="'线下预约'"></MenuLocation>
      <div class="main-content">
        <div
          class="card"
          v-for="(item, index) in AdressList"
          :key="index"
          @click="nextTo(item)"
          :style="index ? 'margin-top:calc(35 / 1920 * 100vw)' : ''"
        >
          <img class="base-face" src="@/assets/registered/face.png" alt="" />
          <div class="location-infor">
            <span>{{ item.siteName }}</span>
            <div class="location-row">
              <img class="location" src="@/assets/registered/location.png" alt="" />
              <span>{{ item.siteAddress }}</span>
            </div>
          </div>
          <img class="next" src="@/assets/registered/next.png" />
        </div>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import { getList } from "@/api/registered.js";
export default {
  data() {
    return {
      AdressList: [],
    };
  },
  beforeCreate() {},
  mounted() {
    this.getAdressList();
  },
  methods: {
    nextTo(item) {
      console.log(item);
      localStorage.setItem("siteId", item.id);
      localStorage.setItem("siteName", item.siteName);
      this.$router.push({
        path: "/chooseDate",
        query: { data: item },
      });
    },
    // 获取场地列表
    getAdressList() {
      let data = {
        page: 1,
        rows: 10,
        status: 0,
      };
      getList(data).then((res) => {
        this.AdressList = res.result.rows;
        console.log(this.AdressList);
      });
    },
  },
  components: {
    Footer,
    MenuLocation,
  },
};
</script>
<style lang="scss" scoped>
.registered-start {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    .main-content {
      padding: calc(37 / 1920 * 100vw) calc(20 / 1920 * 100vw);
      background: #fff;
      border-radius: calc(5 / 1920 * 100vw);
      min-height: calc(936 / 1920 * 100vw);
      .card {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        cursor: pointer;
        padding: 0px calc(10 / 1920 * 100vw) calc(12 / 1920 * 100vw);
        .base-face {
          width: calc(50 / 1920 * 100vw);
          height: calc(50 / 1920 * 100vw);
        }
        .location-infor {
          margin-left: calc(13 / 1920 * 100vw);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > span {
            font-size: calc(16 / 1920 * 100vw);
          }
          .location-row {
            display: flex;
            align-items: center;
            .location {
              width: calc(13 / 1920 * 100vw);
              height: calc(16 / 1920 * 100vw);
            }
            > span {
              font-size: calc(14 / 1920 * 100vw);
              color: #818080;
              margin-left: calc(8 / 1920 * 100vw);
            }
          }
        }
        .next {
          width: calc(12 / 1920 * 100vw);
          height: calc(20 / 1920 * 100vw);
          margin-left: auto;
        }
      }
    }
  }
}
</style>
